32.7 KB · ⇊ 10 parts · ⤓ Micron 32.7 KB · ⤓ HTML 75.5 KB

top

mwcaFavicon (in inglese: [ˈfæv.ɪˌkɒn], in italiano: [ˈfaviˌkɔn]) è un termine inglese, contrazione di mwcwfavorite icon. In mwdainformatica indica un'icona associata a una particolare mwdqpagina web. Solitamente la favicon è una piccola immagine, spesso un logo, pertinente ai contenuti del mwdgsito web correlato. La favicon viene visualizzata alla sinistra dell'mwdwURL nella mweabarra degli indirizzi di un mweqbrowser, nel momento in cui si naviga su un sito che ne è provvisto. L'icona è inoltre visualizzata nel menu dei mwegpreferiti di un browser. Nata come funzionalità di mwewMicrosoft mwfaInternet Explorer versione 5, in seguito è stata integrata su molti altri browser, tra cui mwfqFirefox, mwfgOpera, mwfwSafari, mwgaChrome e mwgqKonquerorcite-ref-egressive-1-0[1]cite-ref-2[2]cite-ref-photoshop-3-0[3].

• Storia

• Standardizzazione

• Utilizzo

• Supporto dei tipi di favicon

• Raccomandazione HTML5 per le icone in più dimensioni

• Icone della schermata iniziale sui dispositivi mobili

• Favicon animate

• Limitazioni e critiche

• CMS

• Note

• Altri progetti

• Collegamenti esterni

A marzo del 1999, la mwlqMicrosoft pubblicò mwlgInternet Explorer 5, che introdusse le favicon per la prima volta.cite-ref-msdn-4-0[4] Inizialmente le favicon erano file di computer chiamati mwmwfavicon.ico messe all'interno della cartella radice di un sito web. Era usato nella sezione link "Preferiti" di mwnaInternet Explorer e compariva vicino all'indirizzo URL della barra degli indirizzi se la pagina era salvata in "Preferiti".cite-ref-5[5]cite-ref-heng2-6-0[6]cite-ref-golive-7-0[7]cite-ref-msdn-4-1[4] Un inconveniente per la mwrqprivacy era che il numero di visitatori che avevano aggiunto l'indirizzo a "Preferiti" poteva essere stimato dalle richieste di scaricamento del file favicon dal server. Questo inconveniente non è più presente, dal momento che tutti i browser odierni caricano il file favicon per mostrarlo nella barra degli indirizzi indipendentemente dal fatto che il sito sia stato aggiunto ai "Preferiti".cite-ref-heng2-6-1[6]

Il formato favicon è stato standardizzato dal mwtaWorld Wide Web Consortium (W3C) nelle specifiche mwtqHTML 4.01, pubblicate a dicembre del 1999, e successivamente nelle specifiche mwtgXHTML 1.0 pubblicate a gennaio del 2000.cite-ref-8[8]cite-ref-9[9] Lo standard prevede un "elemento di tipo link" con un "attributo Rel" nel tag HEAD del documento per la definizione del formato, del nome e del percorso del favicon. Diversamente dallo schema precedente, il file può essere in una cartella di un sito web esterno e avere un mwvwformato file immagine.cite-ref-10[10]cite-ref-w3c-11-0[11]

Nel 2003 il formato .ico è stato registrato con la mwyqInternet Assigned Numbers Authority (IANA) sotto il tipo MIME.cite-ref-12[12]cite-ref-0-13-0[13] Ciononostante, quando si usa il formato .ico per mostrare immagini, Internet Explorer non può mostrare file forniti con quel tipo MIME standard.cite-ref-0-13-1[13] Una soluzione per Internet Explorer potrebbe essere quella di associare l'estensione .ico al tipo MIME non standard mwbgimage/x-icon nella configurazione dei server web.cite-ref-14[14]

Google ha iniziato ad inserire le favicon dei siti web nei suoi risultati di ricercacite-ref-15[15].

Per aggiungere la favicon ad una pagina web è disponibile un apposito mwegtag mwewHTML per specificare la posizione dell'mwfafile all'interno del mwfqserver web. Il tag viene posto nella sezione mwfghead di un file HTML con sintassi:

mwgamwgq<mwgglink mwgwrelmwha=mwhq"icon" mwhghrefmwhw=mwia"http://[percorso]/favicon.ico" mwiq/>

In questo modo ogni immagine delle giuste dimensioni (16×16 o 32×32 ma anche 48×48 mwiwpixel, se mwja.ico) può essere usata come favicon; alternativamente al formato mwjq.ico possono essere usati anche i formati mwjg.gif e mwjw.png di qualsiasi dimensione. Inoltre sfruttando le potenzialità del formato .gif è possibile creare delle favicon animate, anche se sono supportate solo da alcuni browser.

Per usare i formati GIF o PNG i tag rispettivamente necessari sono:

mwkgmwkw<mwlalink mwlqrelmwlg=mwlw"icon" mwmahrefmwmq=mwmg"http://[percorso]/favicon.gif" mwmwtypemwna=mwnq"image/gif" mwng/>

oppure:

mwoqmwog<mwowlink mwparelmwpq=mwpg"icon" mwpwhrefmwqa=mwqq"http://[percorso]/favicon.png" mwqgtypemwqw=mwra"image/png" mwrq/>

Se si carica una favicon per la prima volta, oppure si sostituisce una precedente, per visualizzarla nel browser può essere necessario cancellare la mwrwcache, non essendo a volte sufficiente ricaricare la pagina.

| Browser | Supporto nativo | Supporto nativo | Supporto nativo | Supporto nativo | Supporto nativo | Supporto nativo | Supporto nativo |

|---|---|---|---|---|---|---|---|

| Browser | ICO | PNG | GIF | GIF animato | JPEG | APNG | SVG |

| Google Chrome | Sì | Sì | Da 4.0 | Da 4.0 | Da 4.0 | No | Da 80.0 |

| Internet Explorer (deprecato) | Da 5.0 | Da 11.0 | Da 11.0 | No | No | No | No |

| Microsoft Edge | Sì | Sì | Sì | No | Sì | No | Sì |

| Mozilla Firefox | Da 1.0 | Da 1.0 | Da 1.0 | Sì | Sì | Da 3.0 | Almeno da 30.0 [ 16 ] |

| Opera | Da 7.0 | Da 7.0 | Da 7.0 | Da 7.0 | Da 7.0 | Da 9.5 | Da 44.0 |

| Safari | Sì | Da 4.0 | Da 4.0 | No | Da 4.0 | No | No |

L'attuale specifica mwaqgHTML5 consiglia di specificare più dimensioni per le icone, utilizzando gli attributi mwaqkrel="icon" sizes="mwaqoelenco separato da spazi delle dimensioni dell'icona"all'interno di un tag <link>cite-ref-17[17]. È possibile fornire più formati di icone, inclusi formati "contenitore" come i file mwaq8Microsoft .ico e mwaraMacintosh .icns, nonché file di mwaregrafica vettoriale scalabile includendo il tipo di contenuto dell'icona nel formato mwaritype="mwarmfile content-type"all'interno del tagmwarq<link>.

A partire da mwaryiOS 5, i dispositivi mobili Apple ignorano la raccomandazione HTML5 e utilizzano invece il metodo proprietariomwarcapple-touch-icon. Il browser web Google Chrome, tuttavia, selezionerà la dimensione corrispondente più vicina da quelle fornite nelle intestazioni HTML per creare icone di applicazioni di 128×128 pixel, quando l'utente sceglie mwargCrea collegamenti all'applicazione... dal menu "Strumenti".

Su iPhone e iPad Apple, così come sui dispositivi mobili Android, gli utenti possono aggiungere pagine web in formato icona come scorciatoie (anziché ogni volta digitale l'indirizzo sul mwarsbrowser) alla loro schermata iniziale. Queste icone di collegamento sono simili alle normali app e gli sviluppatori web possono fornire icone dedicate ai collegamenti su schermo in modo che l'utente non le confonda con le app installate sul proprio dispositivo e capisca subito di quale collegamento si tratta.

Per i dispositivi Apple con il sistema operativo iOS versione 1.1.3 o successiva, gli utenti possono mwar4aggiungere un sito Web alla schermata iniziale utilizzando il pulsante mwar8Aggiungi alla schermata iniziale all'interno del comando "mwasacondividi" in mwaseSafaricite-ref-18[18]cite-ref-applewebclip3-19-0[19].

Funziona per qualsiasi sito web. Ma affinché iOS visualizzi il collegamento con un'icona, un sito Web deve fornire un mwass<link rel="apple-touch-icon" ...>nella sezione mwasw<head>dei documenti serviti dal sito Web. Se l'icona personalizzata non viene fornita, nella schermata iniziale verrà invece inserita una mwas0miniatura della pagina Webcite-ref-allinthehead4-20-0[20].

Le dimensioni dell'icona dell'app nelle diverse classi di dispositivi sono diverse. Le dimensioni consigliate per le icone sono 152x152 per mwatmiPad (fino all'iPad 2, uscito nel 2011), 167x167 per iPad con schermi mwatqRetina (iPad 3 e successivi) e 180x180 per mwatuiPhone. Se non viene fornita alcuna icona della dimensione corrispondente, iOS sceglierà l'icona più grande mwatyrel="apple-touch-icon"e la ridimensionerà automaticamentecite-ref-21[21].

Il file icona a cui fa riferimento mwauuapple-touch-iconviene modificato per aggiungere angoli arrotondati. Nelle versioni iOS precedenti a mwauyiOS 7, venivano aggiunti un'ombra esterna e una lucentezza riflettente e con mwaucapple-touch-icon-precomposedpotrebbe essere fornita un'icona per indicare ai dispositivi di non applicare una lucentezza riflettente sull'immaginecite-ref-applewebclip3-19-1[19]cite-ref-allinthehead4-20-1[20].

Neanche i browser o i dispositivi mobili richiedono HTML per recuperare queste iconecite-ref-allinthehead4-20-2[20]. La radice del sito Web è la posizione predefinita per il file mwavuapple-touch-icon.png(in ordine di priorità)cite-ref-applewebclip3-19-2[19]cite-ref-allinthehead4-20-3[20].

Sui dispositivi mwawaAndroid, gli utenti possono utilizzare la funzione mwaweAggiungi alla schermata iniziale nel menu degli strumenti di Chrome per aggiungere una pagina Web alla schermata iniziale.

Funziona anche per qualsiasi sito Web, ma se non viene fornita alcuna favicon, viene utilizzata un'icona generica. Poiché le icone delle app Android hanno una dimensione di 48x48 punti, il sito web dovrebbe fornire le favicon con dimensioni multiple di 48x48 pixel. Per i moderni dispositivi ad alta risoluzione, Google consiglia di fornire icone in 192x192 pixelcite-ref-23[23].

Android supporta anche i file Web Manifest, che consentono di integrare i siti Web in modo più approfondito con il sistema. Un Web Manifest è un file mwaxeJSON che specifica i mwaximetadati per un'app Web progressiva. Consente allo sviluppatore di fornire non solo le icone, ma anche un nome breve da visualizzare sulla schermata iniziale e i colori del temacite-ref-24[24]. Tuttavia, non è necessario fornire un file manifest affinché il comando mwaxcAggiungi alla schermata iniziale funzionicite-ref-13-22-2[22].

Vari browser come Chrome, mwax4Firefox e Opera supportano l'animazione delle favicon. Dal 2001 è stata aperta una segnalazione di bug per Firefox che richiede un modo per disabilitare questa funzionecite-ref-25[25]cite-ref-26[26].

La favicon può portare a tempi lenti di caricamento della pagina ed mway0errori 404cite-ref-heng2-6-2[6].

Il mwazmW3C non ha standardizzato l'attributo rel, quindi ci sono altre parole chiave come mwazqshortcut icon che sono accettate anche dallo mwazuuser agentcite-ref-w3c-11-1[11]cite-ref-jeffdavis-27-0[27].

Le favicon vengono spesso manipolate nell'ambito di attacchi di mwaz8phishing o intercettazioni contro le pagine Web mwaaaHTTPS. Molti browser Web visualizzano le favicon vicino ad aree dell'interfaccia utente del browser Web, come la barra degli indirizzi, che vengono utilizzate per comunicare se la connessione a un sito Web utilizza un protocollo sicuro come mwaaeTLS. Modificando la favicon rendendola un'immagine familiare come un lucchetto, un utente malintenzionato può tentare di indurre l'utente a pensare di essere connesso in modo sicuro al sito Web visualizzato. Gli strumenti di attacco mwaaiman-in-the-middle automatizzati come SSLStrip utilizzano questo truccocite-ref-marlinspike-28-0[28]. Per eliminare questo, alcuni browser Web come Firefox o Google Chrome visualizzano la favicon all'interno della scheda mentre mostrano lo stato di sicurezza del protocollo utilizzato per accedere al sito Web accanto all'mwaacURLcite-ref-arstechnica-com-29-0[29].

Poiché le favicon si trovano solitamente alla radice della mwaa0directory del sito sul mwaa4server, possono essere utilizzate con una certa affidabilità per rivelare se un mwaa8client Web è connesso a un determinato servizio. Funziona sfruttando la funzionalità di mwabareindirizzamento dopo il mwabelogin di molti siti Web, richiedendo la favicon in un URL di reindirizzamento dopo il login e testando la risposta del server per discernere se all'utente viene fornita la risorsa richiesta (il che significa che l'utente è loggato al servizio), o invece reindirizzato alla pagina di login (il che significa che non è loggato al servizio)cite-ref-30[30].

Nel 2021 i ricercatori dell'mwabcUniversità dell'Illinois hanno dimostrato un metodo per il monitoraggio del browser utilizzando le faviconcite-ref-31[31].

Il mwab4malware favicon crea filemwab8.icoche contengono codice mwacaPHP dannoso, andandosi a sostituire alla favicon originale del CMS. Questo codice è noto per eseguire azioni pericolose sui siti Web come URL injection, creazione di account "amministratore" in mwaceWordPress e mwaciDrupal, installazione di mwacmspyware e mwacqtrojan, creazione di pagine di mwacuphishing. Inquina anche il server con file di mwacyspam e il codice dannoso viene aggiunto a mwaccindex.php e ad altri file PHP che includono il filemwacg.icocite-ref-32[32].

Attacchi di skimming (in cui l'hacker inietta codice dannoso in un sito Web ed estrae i dati da un mwac4modulo che l'utente ha compilato) hanno già incorporato favicon dannose e avuto un impatto negativo su aziende note come mwac8Tupperware, mwadaSmith & Wesson, mwadeMacy's e mwadiBritish Airwayscite-ref-2-33-0[33].

Le favicon possono essere sfruttate anche per creare mwadgattacchi omograficicite-ref-2-33-1[33].

cite-note-egressive-11. ↑ mwaemDave Lane, mwaeqmwaeuCreating a Multi-Resolution Favicon Including Transparency with the GIMP, su mwaeyEgressive.com, 9 agosto 2008. mwaecURL consultato il 25 febbraio 2011 mwaeg(archiviato dall'mwaekurl originale il 25 dicembre 2010).

cite-note-22. ↑ mwae0mwae4mwae8What's With Google's New Mini Icon?, BBC, 20 gennaio 2009. mwafaURL consultato il 25 febbraio 2011. mwafi«That 16x16 pixel square is the size of the favicon in question, if not the scope.»

cite-note-photoshop-33. ↑ mwafyJennifer Apple, mwafcmwafgFaviconmwafk — How To Create A Favicon.ico, su mwafophotoshopsupport.com. mwafsURL consultato il 25 febbraio 2011.

cite-note-msdn-44. ↑ mwagemwagimwagmHow to Add a Shortcut Icon to a Web Page, in mwagqmwaguMicrosoft Developer Network, Microsoft. mwagyURL consultato il 15 marzo 2010.

cite-note-55. ↑ mwagoDarin McGrew, mwagsmwagwWeb Authoring FAQ – 8.11. How can I have a custom icon when people bookmark my site?, su mwag0htmlhelp.com, 26 aprile 2007. mwag4URL consultato il 23 febbraio 2011.

cite-note-heng2-66. ↑ mwahyChristopher Heng, mwahcmwahgWhat is Favicon.ico? Personalise Your Site's Bookmarks, su mwahkthesitewizard.com, 7 settembre 2008. mwahoURL consultato il 23 febbraio 2011.

cite-note-golive-77. ↑ mwah4mwah8mwaiaCreating favicons with Adobe Photoshop and GoLive, su mwaiegolivein24.com, mwaiiAdobe GoLive. mwaimURL consultato il 25 febbraio 2011 mwaiq(archiviato dall'mwaiuurl originale il 7 dicembre 2003).

cite-note-88. ↑ mwaikmwaiomwaisHTML 4.01 Specification, su mwaiww3.org, World Wide Web Consortium, 24 dicembre 1999. mwai0URL consultato il 14 marzo 2011.

cite-note-99. ↑ mwajemwajimwajmXHTML™ 1.0: The Extensible HyperText Markup Language, su mwajqw3.org, World Wide Web Consortium, 26 gennaio 2000. mwajuURL consultato il 14 marzo 2011.

cite-note-1010. ↑ mwajkKarl Dubost, mwajomwajsWeb site meta data profile: favicon, ..., su mwajww3.org, World Wide Web Consortium, ottobre 2005. mwaj0URL consultato il 23 febbraio 2011.

cite-note-w3c-1111. ↑ mwakmKarl Dubost, mwakqmwakuHow to Add a Favicon to your Site, su mwakyw3.org, World Wide Web Consortium, 24 ottobre 2005. mwakcURL consultato il 25 febbraio 2011.

cite-note-1212. ↑ mwaksSimon Butcher, mwakwmwak0Published specification, su mwak4iana.org, Internet Assigned Numbers Authority, 3 settembre 2003. mwak8URL consultato il 25 febbraio 2011.

cite-note-0-1313. ↑ mwalumwalymwalcIE9 RC Minor Changes List, su mwalgIEInternals. mwalkURL consultato il 7 aprile 2016.

cite-note-1414. ↑ mwal0Paul Irish, mwal4mwal8commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate, su mwamagithub.com, mwameGitHub, 15 dicembre 2010. mwamiURL consultato il 25 febbraio 2011.

cite-note-1515. ↑ mwamy(mwamcmwamgEN) Julie Mamula, mwamkmwamoFavicons Now in Google Search Results | Sanctuary, su mwamsSanctuary - A Digital Marketing Group, 2 marzo 2020. mwamwURL consultato il 7 settembre 2021.

cite-note-161. Verificato con Firefox 30.0 su Ubuntu 14.04.

cite-note-1717. ↑ mwanmmwanqmwanuHTML Living Standard, Section 4.6.6.6 'Link type "icon"'mwany, su mwanchtml.spec.whatwg.org, WHATWG. mwangURL consultato il 17 novembre 2015.

cite-note-1818. ↑ mwanwmwan0mwan4iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips, su mwan8developer.apple.com, Apple Inc.. mwaoaURL consultato il 27 maggio 2010.

cite-note-applewebclip3-1919. ↑ mwaogmwaokmwaooSafari Web Content Guide: Specifying a Webpage Icon for Web Clip, su mwaosdeveloper.apple.com, Apple Inc., 15 novembre 2010. mwaowURL consultato il 25 febbraio 2011.

cite-note-allinthehead4-2020. ↑ mwapyDrew McLellan, mwapcmwapgHow To Set an Apple Touch Icon for Any Site, su mwapkallinthehead.com, Allinthe head.com, 17 gennaio 2008. mwapoURL consultato l'11 marzo 2011.

cite-note-2121. ↑ mwap4mwap8mwaqaConfiguring Web Applications, su mwaqedeveloper.apple.com. mwaqiURL consultato il 3 luglio 2021.

cite-note-13-2222. ↑ mwaqo(mwaqsmwaqwEN) mwaq0mwaq4How to add a favicon to your website — The modern browser guide, su mwaq8Loqbooq Blog. mwaraURL consultato il 3 luglio 2021.

cite-note-2323. ↑ mwarq(mwarumwaryEN) mwarcmwargMaterial Design, su mwarkMaterial Design. mwaroURL consultato il 3 luglio 2021.

cite-note-2424. ↑ mwar4(mwar8mwasaEN) mwasemwasiAdd to Home screen - Progressive web apps (PWAs) | MDN, su mwasmdeveloper.mozilla.org. mwasqURL consultato il 3 luglio 2021.

cite-note-2525. ↑ mwasgmwaskmwasoBug 111373 - don't allow animated site icons (favicons), su mwassbugzilla.mozilla.org, 21 novembre 2001.

cite-note-2626. ↑ mwas8mwatamwateFirefox Bug 111373 - don't allow animated site icons (mozilla.org), su mwatinews.ycombinator.com, Hacker News, 7 luglio 2015.

cite-note-jeffdavis-2727. ↑ mwatyJeff Davis, mwatcmwatgwhy doesn't the favicon for my site appear in IE7?, in mwatkjeffdav on code, Microsoft, 27 dicembre 2007. mwatoURL consultato l'11 marzo 2013.

cite-note-marlinspike-2828. ↑ mwat4Moxie Marlinspike, mwat8mwauaDefeating Ssl Using Sslstrip (Marlinspike Blackhat), in mwaue(see description of video), SecurityTube, 21 febbraio 2011. mwauiURL consultato il 9 luglio 2011 mwaum(archiviato dall'mwauqurl originale il 13 luglio 2011).

cite-note-arstechnica-com-2929. ↑ mwaugmwaukmwauoFirefox version 14 features, su mwausarstechnica.com. mwauwURL consultato il 18 luglio 2012.

cite-note-3030. ↑ mwavaRobin Linus, mwavemwaviYour Social Media Fingerprint, su mwavmrobinlinus.github.io. mwavqURL consultato il 14 ottobre 2016.

cite-note-3131. ↑ mwavg(mwavkmwavoEN) Dan Goodin, mwavsmwavwNew browser-tracking hack works even when you flush caches or go incognito, su mwav0Ars Technica, 19 febbraio 2021. mwav4URL consultato il 21 febbraio 2021.

cite-note-3232. ↑ mwawi(mwawmmwawqEN) mwawumwawyFavicon (.ico) Virus Backdoor in WordPress, Drupal, su mwawcAstra Website Security. mwawgURL consultato il 7 settembre 2021.

cite-note-2-3333. ↑ mwaw4(mwaw8mwaxaEN) mwaxemwaxiHackers abuse lookalike domains and favicons for credit card theft, su mwaxmBleepingComputer. mwaxqURL consultato il 7 settembre 2021.

Altri progetti

• Wikimedia Commons

• Wikimedia Commons contiene immagini o altri file sulle favicon

• citereflessico-del-xxi-secoloFavicon, in Lessico del XXI secolo, Istituto dell'Enciclopedia Italiana, 2012.

• mwaxs(EN) mwaxwHow to Add a Favicon to your Site sul sito del mwax0W3C